<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue test</title>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <ul v-for="v in nameArr" :key="v.id">
      <li :style="{color: activeColor}">{{ v.text }}</li>
    </ul>
    <button @click="method1">method1</button>
    
    
  </div>
  <script type="text/javascript">
    let vm = new Vue({
      el: "#app",
      data: {
        nameArr: [{
          id: "71234123",
          text: "1"
        }, {
          id: "71234d123",
          text: "2"
        }, {
          id: "7123412d3",
          text: "3"
        }, {
          id: "712a34123",
          text: "4"
        }],
        activeColor: '',
        userAgent: ""
      },
      methods: {
        method1() {
          this.nameArr[0].name = "method1"
          // this.$set(this.nameArr, 0, {
          //   id: "71234123",
          //   text: "1qrwereqw"
          // })
          this.activeColor = "red"
          this.$nextTick(() => {
            this.activeColor = ""
            console.log("nextTick", "method1", this.nameArr[0])
          })
        },
        method2() {
          this.$nextTick(() => {
            console.log("nextTick", "method2")
          })
        },
        method3() {
          this.userAgent = window.userAgent
        }
      }
    })

    /** 
      1.$nextTick只要调用一定会执行，只不过如果有dom更新，就会在dom更新之后执行
      2.这里的dom更新指的是虚拟的dom更新，还没有重新渲染到页面上
    **/
  </script>
</body>

</html>